<template>
    <div>
        <!--:model="tenant" 数据双向绑定-->
        <!--ref="tenantForm" id="tenantForm",给form去一个名字-->
        <!--:rules="formRules" 校验规则-->
        <el-form :model="employee" ref="tenantForm" :rules="formRules" label-position="left" label-width="100px" class="demo-ruleForm login-container">
            <h3 class="title">用户关联</h3>
            <el-form-item prop="companyName"label="用户名称">
                <el-input type="text" v-model="employee.username" auto-complete="off" placeholder="请输入需要绑定的用户名称！"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="settledIn" >绑定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            //elementui提供自定义验证 value 当前这个框
            var validatePass2 = (rule, value, callback) => {
                console.log(value); //确认密码 底层提供给我们
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.employee.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback();//表示通过
                }
            }
            return {
                keyword:'',
                mapDialogVisibale:false,
                //employee:tenant 为了做数据表单校验不要嵌套对象
                employee: {
                    username:'',
                    openid:'',
                },
                formRules: {
                    username: [
                        { required: true, message: '请输入用户名称!', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            selectAdrressConfirm(){
                //把地图里面的值放入到表单地址里面,通过这种方式获得值
                this.employee.address = document.getElementById("searchInput").value;
                //把对话框关闭
                this.mapDialogVisibale = false;
            },
            settledIn(){
                //验证表单数据
                this.$refs.tenantForm.validate((valid) => {
                    //校验表单成功后才做一下操作
                    if (valid) {
                            //拷贝后面对象的值到新对象,防止后面代码改动引起模型变化
                            let url =  window.location.href;
                            let openid = url.split("=")[1]; //xxx
                            //let para = Object.assign({}, this.employee); //employee
                            //tenant?
                            let para = {
                                openid:openid,
                                username:this.employee.username
                            }
                            para.openid=openid;
                            //判断是否有id有就是修改,否则就是添加
                            console.debug("username和openid："+para);
                            this.$http.post("/binder",para).then((res) =>{
                                this.logining = false;
                                //NProgress.done();
                                let { msg, success, objResult } = res.data;

                                if (!success) {
                                    this.$message({
                                        message: msg,
                                        type: 'error'
                                    });
                                } else {
                                    sessionStorage.setItem('user', JSON.stringify(objResult.user));
                                    sessionStorage.setItem('token',objResult.token);
                                    this.$router.push({ path: '/user' });
                                }
                            });
                    }
                })
            }
        },
    }

</script>

<style lang="scss" scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 500px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    }
    .bmap{
        width: 100%;
        height: 600px;
    }
    .searchinput{
        width: 300px;
        box-sizing: border-box;
        padding: 9px;
        border: 1px solid #dddee1;
        line-height: 20px;
        font-size: 16px;
        height: 38px;
        color: #333;
        position: relative;
        border-radius: 4px;
    }
</style>